<template>
	<div style="width: 100%">
		<div class="menu">
			<li><el-link href="/#/chain/atlas" :underline="false">产业链图谱</el-link></li>
			<li><el-link href="/#/chain/analysis" :underline="false">现状分析图</el-link></li>
			<li><el-link href="/#/chain/panorama" :underline="false">全景图</el-link></li>
			<li><el-link href="/#/chain/thermodynamics" :underline="false">热力图</el-link></li>
			<li><el-link href="/#/chain/business" :underline="false">招商地图</el-link></li>
			<li><el-link href="/#/chain/company/list" :underline="false">企业库</el-link></li>
			<li><el-link href="/#/chain/innovate" :underline="false">创新库</el-link></li>
			<li><el-link href="/#/chain/invest" :underline="false">投融资库</el-link></li>
			<li><el-link href="/#/chain/project" :underline="false">招商项目库</el-link></li>
			<li><el-link href="/#/chain/meeting" :underline="false">商会协会库</el-link></li>
			<li><el-link class="active" href="/#/chain/county" :underline="false">乡贤库</el-link></li>
			<li><el-link href="/#/chain/clue" :underline="false">线索池</el-link></li>
			<li><el-link href="/#/chain/policy" :underline="false">政策池</el-link></li>
			<li><el-link href="/#/chain/person" :underline="false">人才池</el-link></li>
			<li><el-link href="/#/chain/organization" :underline="false">服务机构池</el-link></li>
			<li><el-link href="/#/chain/report" :underline="false">报告池</el-link></li>
		</div>
		<div class="table-admin-container" style="margin-top: 2px; display: flex; padding: 10px; margin-bottom: 80px">
			<el-row :gutter="10" style="width: 100%">
				<el-col :span="4">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">医药制造</div>
							</div>
						</template>
						<List></List>
					</el-card>
				</el-col>
				<el-col :span="14">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">乡贤库</div>
							</div>
						</template>
						<div style="position: relative; width: 100%; background-color: #ffffff; height: 550px">
							<div style="z-index: 1; width: 100%; background-color: #ffffff; height: 550px" ref="mapRef"></div>
						</div>
					</el-card>
					<el-card style="height: 543px">
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">企业名单列表</div>
							</div>
						</template>
						<div class="content">
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="name w33">张三</div>
									<div class="address">内蒙古呼和浩特市玉泉区大东园街1号楼9号</div>
									<div class="cl"></div>
								</div>
							</li>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6" class="map">
					<el-card style="height: 275px" body-style="padding:0">
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">优秀乡贤</div>
								<div class="more"></div>
							</div>
						</template>
						<div class="content">
							<div>
								<div style="width: 33%; padding: 10px; border-radius: 5px; float: left">
									<el-image src="/src/assets/masike.jpeg" style="border-radius: 10px"></el-image>
									<div style="text-align: center; line-height: 30px; line-height: 30px; font-size: 16px">马斯克</div>
									<div style="text-align: center; line-height: 30px; line-height: 30px; font-size: 12px; color: #999">商会负责人，智库专家</div>
								</div>
								<div style="width: 33%; padding: 10px; border-radius: 5px; float: left">
									<el-image src="/src/assets/masike.jpeg" style="border-radius: 10px"></el-image>
									<div style="text-align: center; line-height: 30px; line-height: 30px; font-size: 16px">马斯克</div>
									<div style="text-align: center; line-height: 30px; line-height: 30px; font-size: 12px; color: #999">商会负责人，智库专家</div>
								</div>
								<div style="width: 33%; padding: 10px; border-radius: 5px; float: left">
									<el-image src="/src/assets/masike.jpeg" style="border-radius: 10px"></el-image>
									<div style="text-align: center; line-height: 30px; line-height: 30px; font-size: 16px">马斯克</div>
									<div style="text-align: center; line-height: 30px; line-height: 30px; font-size: 12px; color: #999">商会负责人，智库专家</div>
								</div>
							</div>
						</div>
					</el-card>
					<el-card style="height: 925px" body-style="padding:0">
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">本地企业家</div>
								<div class="more"></div>
							</div>
						</template>
						<div class="content">
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="score color">张三</div>
									<div class="cl"></div>
								</div>
							</li>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<!-- <div  class="table-admin-container  layout-padding"  style="width: 400px; float: left; height: 96%;  top: 50px; ">-->
	</div>
</template>

<script setup lang="ts" name="cgjudgeLists">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getList, getListAll, del, batDel, change } from '/@/api/cgjudge/index';
import * as echarts from 'echarts';
import axios from 'axios';
import { handleTree } from '/@/utils';
import chinaMap from '../../assets/100000_full.json';

// 引入组件
const List = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/List.vue'));
const Menu = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/Menu.vue'));
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const EditDialog = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/form/edit.vue'));
// 定义变量内容
const tableRef = ref<RefType>();
const value = ref(4);
const editRef = ref();
const mapRef = ref();
const state = reactive<TableDemoState>({
	tableData: {
		// 列表数据（必传）
		data: [],
		// 表头内容（必传，注意格式）
		header: [
			{ key: 'name', colWidth: '', title: '姓名', type: 'text', isCheck: true },
			{ key: 'court', colWidth: '', title: '法院', type: 'text', isCheck: true },
			{ key: 'duties', colWidth: '', title: '职务', type: 'text', isCheck: true },
			{ key: 'phone', colWidth: '', title: '联系方式', type: 'text', isCheck: true },
			{ key: 'dutyTime', colWidth: '', title: '值班时间', type: 'text', isCheck: true },
			{ key: 'dutyAddress', colWidth: '', title: '值班地点', type: 'text', isCheck: true },
		],
		// 配置项（必传）
		config: {
			total: 0, // 列表总数
			loading: true, // loading 加载
			isButton: true,
			isBorder: false, // 是否显示表格边框
			isSerialNo: false, // 是否显示表格序号
			isSelection: true, // 是否显示表格多选
			isOperate: true, // 是否显示表格操作栏
			isAdd: 'admin:cogencgjudge:save', //新增标识
			isUpdate: 'admin:cogencgjudge:save', //修改标识
			isDelete: 'admin:cogencgjudge:del', //删除标识
			isBatchEdit: '', //批量修改标识
			isView: '',
			isBatchAdd: 'admin:cogencgjudge:batchadd', //批量导入
			isBatchDel: 'admin:cogencgjudge:batchdel', //批量导入
		},
		// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
		search: [
			{ label: '姓名', prop: 'name', placeholder: '请输入姓名', required: false, type: 'input' },
			{ label: '法院', prop: 'court', placeholder: '请输入法院', required: false, type: 'input' },
		],
		// 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
		param: {
			page: 1,
			psize: 10,
		},
		//显示分页
		showpage: 1,
		// 打印标题
		printName: '数据打印',
		//列字典
		dictData: {},
	},
});

// 初始化列表数据
const getTableData = () => {
	state.tableData.config.loading = true;
	state.tableData.data = [];
	getList(state.tableData.param).then((response: any) => {
		state.tableData.data = response.data.data;
		state.tableData.config.total = response.data.total;
		state.tableData.config.loading = false;
	});
};

// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
	state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
	tableRef.value.pageReset();
};
// 删除当前项回调
const onTableDelRow = (row: EmptyObjectType) => {
	return del(row.id).then(() => {
		getTableData();
		ElMessage.success(`删除法官${row.name}成功！`);
	});
};
const onTableBatchDel = (ids: string) => {
	return batDel(ids).then(() => {
		getTableData();
		ElMessage.success(`批量删除成功！`);
	});
	console.log(ids);
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
	state.tableData.param.page = page.page;
	state.tableData.param.psize = page.psize;
	getTableData();
};
// 拖动显示列排序回调
const onSortHeader = (data: TableHeaderType[]) => {
	state.tableData.header = data;
};

/** 新增按钮操作 */
const onTableAddRow = () => {
	editRef.value.openDialog('add');
};
/** 修改按钮操作 */
const onTableUpdateRow = (row: any) => {
	editRef.value.openDialog('edit', row);
};

// 页面加载时
onMounted(() => {
	getTableData();
	// 关联查询
	const mapChart = echarts.init(mapRef.value);
	echarts.registerMap('china', chinaMap);
	var allData = [
		{
			name: '北京',
		},
		{
			name: '天津',
		},
		{
			name: '上海',
		},
		{
			name: '重庆',
		},
		{
			name: '河北',
		},
		{
			name: '河南',
		},
		{
			name: '云南',
		},
		{
			name: '辽宁',
		},
		{
			name: '黑龙江',
		},
		{
			name: '湖南',
		},
		{
			name: '安徽',
		},
		{
			name: '山东',
		},
		{
			name: '新疆',
		},
		{
			name: '江苏',
		},
		{
			name: '浙江',
		},
		{
			name: '江西',
		},
		{
			name: '湖北',
		},
		{
			name: '广西',
		},
		{
			name: '甘肃',
		},
		{
			name: '山西',
		},
		{
			name: '内蒙古',
		},
		{
			name: '陕西',
		},
		{
			name: '吉林',
		},
		{
			name: '福建',
		},
		{
			name: '贵州',
		},
		{
			name: '广东',
		},
		{
			name: '青海',
		},
		{
			name: '西藏',
		},
		{
			name: '四川',
		},
		{
			name: '宁夏',
		},
		{
			name: '海南',
		},
		{
			name: '台湾',
		},
		{
			name: '香港',
		},
		{
			name: '澳门',
		},
	];
	for (var i = 0; i < allData.length; i++) {
		allData[i].value = Math.round(Math.random() * 100);
	}

	const mapOption = {
		tooltip: {
			show: true,
			formatter: function (params) {
				if (params.data) return params.name + '：' + params.data['value'];
			},
		},
		visualMap: {
			type: 'continuous',
			text: ['', ''],
			left: '50',
			min: 0,
			max: 100,
			inRange: {
				color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096'],
			},
			splitNumber: 0,
		},
		series: [
			{
				name: 'MAP',
				type: 'map',
				mapType: 'china',
				zoom: 1.2,
				selectedMode: 'false', //是否允许选中多个区域
				data: allData,
			},
		],
	};
	mapChart.setOption(mapOption);
});
</script>

<style scoped lang="scss">
.chain {
	width: 100%;
	height: 100%;
	padding: 10px;
	.section-level {
		width: 5%;
		height: auto;
		font-size: 18px;
		float: left;
		color: #fff;
		display: flex;
		align-items: center;
		text-align: center;
		border-radius: 6px 0px 0px 6px;
	}
	.title {
		color: #ffffff;
		padding: 10px;
		text-align: center;
		font-size: 16px;
		border-radius: 6px 6px 0px 0px;
	}
	.level_one {
		width: 49%;
		margin-top: 10px;
		margin-right: 1%;
		color: #fff;
		float: left;
		border: 0.0625rem dashed #0066cb;
		border-radius: 6px 6px 0px 0px;
		.level_two {
			margin-top: 10px;
			float: left;
			text-align: center;
			padding: 10px;
			border-radius: 6px;
		}
		.level_two:nth-child(2n + 1) {
			float: right;
		}
		.w100 {
			width: 100%;
		}
		.w50 {
			width: 49%;
		}
	}
	.blue {
		background-color: #1890ff;
	}
	.orange {
		background-color: orangered;
	}
	.grey {
		background-color: gray;
	}
	.light-blue {
		background-color: rgb(99, 193, 224);
	}
	.section-level-upstream {
		border: 0.0625rem dashed #0066cb;
		width: 40%;
		float: left;
		padding: 5px;
	}
	.section-level-midstream {
		width: 35%;
		float: left;
		padding: 5px;
		border: 0.0625rem dashed #0066cb;
	}
	.section-level-downstream {
		width: 20%;
		float: left;
		padding: 5px;
		border: 0.0625rem dashed #0066cb;
		border-radius: 0px 6px 0px 0px;
	}
}
.card-header {
	height: 35px;
	.icon {
		float: left;
		margin-right: 15px;
	}
	.title {
		font-size: 22px;
		color: #010101;
		float: left;
	}
	.remind {
		height: 16px;
		background: #ff0000;
		border-radius: 6px 6px 6px 0px;
		float: left;
		color: #ffff;
		margin-left: 10px;
		text-align: center;
		padding: 0px 5px;
		font-size: 12px;
	}
	.more {
		background-image: url('/src/assets/more.png');
		width: 16px;
		height: 14px;
		float: right;
		margin-top: 10px;
		background-size: 100% 100%;
	}
}
.menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	li {
		list-style: none;
		float: left;
		width: 5.8%;
		font-size: 14px;
		line-height: 38px;
		text-align: center;
		padding-bottom: 7px;
		.el-link {
			color: #000000 !important;
		}
		.el-link:hover {
			font-size: 16px;
			color: #1890ff !important;
			border-bottom: #1890ff 3px solid;
			border-radius: 1px 2px 2px 1px;
		}
		.active {
			font-size: 16px;
			color: #1890ff !important;
			border-bottom: #1890ff 3px solid;
			border-radius: 1px 2px 2px 1px;
		}
	}
}
.table-admin-container {
	.table-admin-padding {
		padding: 15px;
		.table-admin {
			flex: 1;
			overflow: hidden;
		}
	}
}
.content {
	min-height: 235px;
	li:hover {
		background-color: rgba(24, 144, 255, 0.1);
	}
	li {
		list-style: none;
		height: auto;
		line-height: 30px;
		padding: 10px 0px 10px 20px;
		.list {
			height: 30px;
			.drop-new {
				background-color: #efa151;
				float: left;
				width: 8px;
				height: 8px;
				border-radius: 3px;
				margin-top: 11px;
			}
			.topic {
				height: 22px;
				background: linear-gradient(140deg, #ff3334, #fe7527);
				border-radius: 0px 6px 0px 6px;
				float: left;
				color: #fff;
				text-align: center;
				line-height: 22px;
				font-size: 14px;
				margin-left: 10px;
				padding: 0 8px;
				margin-top: 4px;
			}
			.title {
				height: 17px;
				font-weight: 400;
				font-size: 15px;
				color: #000000;
				float: left;
				margin-left: 10px;
			}
			.time {
				color: #999999;
			}
			.score {
				float: right;
				color: #1890ff;
				margin-right: 10px;
			}
			.color {
				color: #000000;
			}
			.lh {
				line-height: 24px;
			}
			.number {
				width: 24px;
				height: 24px;
				background: linear-gradient(-49deg, #4180fb, #52aafe);
				box-shadow: 0px 6px 12px 0px rgba(44, 109, 251, 0.26);
				border-radius: 50%;
				float: left;
				text-align: center;
				line-height: 24px;
				color: #fff;
			}
			.w33 {
				width: 33%;
				float: left;
			}
			.address {
				float: right;
			}
			.name {
				text-align: center;
			}
		}
		.description {
			height: 20px;
			color: #999999;
			margin-left: 10px;
			.address {
				float: left;
				margin-left: 10px;
			}
			.line {
				float: left;
				margin-left: 10px;
			}
			.time {
				float: left;
				margin-left: 10px;
			}
		}
	}
}
.el-card {
	margin-bottom: 5px;
}
</style>
